<template>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span>管理员角色</span>
				<el-button @click="handleOpenDialogAdd()" plain type="primary" icon="circle-plus">
					添加角色
				</el-button>
			</div>
		</template>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="#" width="" />
			<el-table-column prop="name" label="分类" width="">
				<template #default="scope">
					<el-tag>{{scope.row.name }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="active" label="操作">
				<template #default="scope">
					<el-button type="primary" plain size="small" @click="handleOpenDialog(scope.row,scope.$index)">
						<el-icon>
							<Edit />
						</el-icon>
					</el-button>
					<el-button type="danger" plain size="small" @click="handleRemove(scope.row.id,scope.$index)">
						<el-icon>
							<Delete />
						</el-icon>
					</el-button>
					<el-button type="success" plain size="small" @click="handleMenu(scope.row)">
						<el-icon>
							<Setting />
						</el-icon>
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>

	<el-dialog v-model="dialogVisibleAdd" title="添加角色">
		<el-form ref="formRef" :rules="rules" :model="form" status-icon label-width="80px">
			<el-form-item label="角色名称" prop="name">
				<el-input v-model="form.name" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisibleAdd = false">取消</el-button>
				<el-button type="primary" @click="handleAdd(formRef)">添加</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 编辑dialog -->
	<el-dialog v-model="dialogVisible" title="编辑角色">
		<el-form ref="formRef" :rules="rules" :model="form" status-icon label-width="80px">
			<el-form-item label="角色名称" prop="name">
				<el-input v-model="form.name" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleEdit(formRef)">保存</el-button>
			</span>
		</template>
	</el-dialog>



	<el-drawer v-model="drawer2" :direction="direction">
		<template #title>
			<h4>设置角色菜单</h4>
		</template>
		<template #default>
			<el-tree ref="treeRef" :data="data" show-checkbox default-expand-all node-key="id" highlight-current
				:props="defaultProps" />
		</template>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="cancelClick">取消</el-button>
				<el-button type="primary" @click="confirmClick">保存</el-button>
			</div>
		</template>
	</el-drawer>
</template>


<script setup>
import { ref, reactive } from 'vue';
import Admin from '@/api/admin.js';
let dialogVisible = ref(false);
let dialogVisibleAdd = ref(false);
let form = ref({ name: '' });
let current = ref(0);
let tableData = ref([

]);
let formRef = ref();
async function loadList() {
	let { status, data } = await Admin.role();
	if (status) {
		tableData.value = data;
		console.log(data)
	}
}
loadList();

let handleOpenDialog = (data, i) => {
	// 浅拷贝，还原表单
	form.value = { ...data };
	// 记录当前行索引
	current.value = i;
	// 显示dialog
	dialogVisible.value = true;
}
let handleOpenDialogAdd = () => {
	form.value = { name: '' };
	dialogVisibleAdd.value = true;
	console.log()
}



let handleRemove = (id, index) => {
	ElMessageBox.confirm(
		'确定要删除标签吗？',
		'确认删除',
		{
			type: 'error',
			confirmButtonText: '确认',
			cancelButtonText: '取消',
		})
		// 确认
		.then(async () => {
			// 先发送ajax，成功后操作DOM进行删除
			let { status, msg } = await Admin.removeRole(id);
			if (status) {
				// 删除成功
				ElMessage.success(msg);
				// 操作DOM
				tableData.value.splice(index, 1);
			} else {
				ElMessage.error(msg);
			}
			// console.log('确认');
		})
		// 取消
		.catch(() => {
			ElMessage('取消成功！')
		});
}
// 表单验证规则
const rules = reactive({
	name: [
		{ required: true, message: '请输入标签名称！', trigger: 'blur' },
		{ min: 1, max: 30, message: '标签长度要求1-30个字符之间', trigger: 'blur' },
	],
});

let handleEdit = (formEl) => {
	// 表单验证
	formEl.validate(async (valid) => {
		if (valid) {
			let { status, msg } = await Admin.update(form.value.id, { ...form.value });
			if (status) {
				// 操作DOM
				tableData.value[current.value] = { ...form.value };
				// 关闭dialog
				dialogVisible.value = false;
				// 提示成功
				ElMessage.success(msg);

			} else {
				// 提示错误

				ElMessage.error(msg);
			}
		}

	});
}
//添加
let handleAdd = (formEl) => {
	//表单验证
	formEl.validate(async (valid) => {
		if (valid) {
			let { status, msg, data } = await Admin.addRole({ ...form.value });
			if (status) {
				// 操作DOM
				tableData.value.push({ id: data.id, name: form.value.name });
				console.log(tableData.value);
				// 关闭dialog
				dialogVisibleAdd.value = false;
				// 提示成功
				ElMessage.success(msg);
				Admin.list();
			} else {
				// 提示错误
				ElMessage.error(msg);
			}
		}
	});
}
let drawer2 = ref(false);
//书多选框

let treeRef = ref();

let defaultProps = {
	children: 'children',
	label: 'label',
}
const data = [
	{
		id: 1,
		label: '全部菜单',
		children: [
			{
				id: 2,
				label: '信息面板',
			},
			{
				id: 3,
				label: '文章管理',
				children: [
					{
						id: 10,
						label: '发布文章',
					},
					{
						id: 11,
						label: '文章列表',
					},
					{
						id: 21,
						label: '标签管理',
					},
					{
						id: 22,
						label: '评论管理',
					},
				],
			},
			{
				id: 4,
				label: '分类管理',
			},
			{
				id: 5,
				label: '公告管理',
				children: [
					{
						id: 19,
						label: '发布公告',
					},
					{
						id: 20,
						label: '公告列表',
					},
				],
			},
			{
				id: 6,
				label: '用户管理',
				children: [
					{
						id: 13,
						label: '用户列表',
					},
				],
			},
			{
				id: 7,
				label: '推广管理',
				children: [
					{
						id: 14,
						label: '轮播图管理',
					},
					{
						id: 16,
						label: '友情链接',
					},
				],
			},
			{
				id: 8,
				label: '系统管理',
				children: [
					{
						id: 17,
						label: '管理员管理',
					},
					{
						id: 15,
						label: '权限角色',
					},
					{
						id: 18,
						label: '菜单管理',
					},
				],
			},
			{
				id: 9,
				label: '账户设置',
			},
		],
	},

];
let idArr = ref([]);
let idArr2 = ref([]);
let setChecked = () => {
	idArr2.value.forEach((item) => {
		treeRef.value.setChecked(item, false, false);
		// item
	});
	idArr.value.forEach((item) => {
		treeRef.value.setChecked(item, true, false);
		// item
	})
}
let handleMenu = async (id) => {
	drawer2.value = true;
	let { status, msg, data: data_list } = await Admin.menu(id);
	if (status) {
		idArr2.value = idArr.value;
		idArr.value = [];
		for (let i = 0; i < data_list.length; i++) {
			idArr.value.push(data_list[i].id);

		} 
		setChecked();

	}
}
// let subdata = ref();
</script>
<style>
.body {
	width: 50%;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
	width: 680px;
}
</style>